import React, { PureComponent } from 'react';
import { Form, Select, Input, DatePicker, Button } from 'antd';
// import { Icon } from 'react-fa';
import Grid from '@/components/Grid';
import Dialog from '@/components/Dialog';
import Layout from '@/components/Layout';

const ModelForm = () => (
  <Form layout="vertical">
    <Form.Item label="名称">
      <Input placeholder="请输入名称" />
    </Form.Item>
    <Form.Item label="备注">
      <Input.TextArea rows={8} placeholder="请输入至少五个字符" />
    </Form.Item>
  </Form>
);

const SearchForm = () => (
  <Form layout="vertical">
    <Form.Item label="名称">
      <Input placeholder="请输入名称" />
    </Form.Item>
    <Form.Item label="开始时间">
      <DatePicker
        showTime
        placeholder="请选择"
        format="YYYY-MM-DD HH:mm:ss"
        style={{ width: '100%' }}
      />
    </Form.Item>
    <Form.Item label="任务负责人">
      <Select placeholder="请选择">
        <Select.Option value="付晓晓">付晓晓</Select.Option>
        <Select.Option value="周毛毛">周毛毛</Select.Option>
      </Select>
    </Form.Item>
    <Form.Item label="产品描述">
      <Input.TextArea rows={4} placeholder="请输入至少五个字符" />
    </Form.Item>
  </Form>
);

class DemoPage extends PureComponent {
  columns = [
    {
      title: '列名',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'crtime',
      width: 200,
      align: 'center',
    },
  ];
  data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  componentDidMount() {}
  handleAdd = e => {
    Dialog.open({
      title: '新建表单',
      fixed: true,
      component: ModelForm,
    });
  };
  showSearchPanel = e => {
    Dialog.drawer({
      title: '高级查询',
      component: SearchForm,
    });
  };
  render() {
    return (
      <Layout
        header={{
          icon: 'user-circle-o',
          title: '演示标题',
        }}
        toolbar={{
          left: (
            <React.Fragment>
              <Button type="primary" onClick={this.handleAdd}>
                新建
              </Button>
              <Button>编辑</Button>
              <Button type="danger">删除</Button>
            </React.Fragment>
          ),
          right: (
            <Form layout="inline">
              <Input.Search placeholder="请输入要查询的关键词" />
              <Button onClick={this.showSearchPanel}>高级查询</Button>
            </Form>
          ),
        }}
      >
        <Grid
          selectedRows={[]}
          columns={this.columns}
          data={this.data}
          pagination={{
            pageNumber: 20,
            total: 300,
          }}
        />
      </Layout>
    );
  }
}

export default DemoPage;
